<template>
  <div class="login-container">
    <el-form ref="loginRef" :model="loginForm" :rules="rules" class="login-form" label-position="left">
      <el-form-item prop="username" label="账号" label-width="70px">
        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号"
                  @keyup.enter="handleLogin"></el-input>
      </el-form-item>
      <el-form-item prop="password" label="密码" label-width="70px">
        <el-input v-model="loginForm.password" :type="passwordType" auto-complete="off" placeholder="密码"
                  @keyup.enter="handleLogin"/>
        <span class="show-pwd" @click="showPwd">
                  <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"/>
                </span>
      </el-form-item>
<!--      <el-form-item prop="code" label="验证码" label-width="70px">-->
<!--        <div class="flex-x-between">-->
<!--          <el-input v-model="loginForm.code" auto-complete="off" placeholder="请输入验证码" style="width: 60%"-->
<!--                    @keyup.enter.native="handleLogin"/>-->
<!--          <img :src="captchaUrl" @click="getCaptcha" class="login-code-img"/>-->
<!--        </div>-->
<!--      </el-form-item>-->
      <el-form-item style="width:100%;">
        <el-button :loading="loading" type="primary" size="large" style="width: 100%" @click.prevent="handleLogin">
          <span v-if="!loading">登录</span>
          <span v-else>登录中...</span>
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup name="login">
import setting from './setting'
import store from '@/stores'

const router = useRouter()
const {proxy} = getCurrentInstance()
import {setToken} from '@/utils/token'


/** Data */
const loading = ref(false)
const passwordType = ref("password")
const uuid = ref("");
const captchaUrl = ref("")

const data = reactive({
  loginForm: {
    username: "admin",
    password: "123456",
    uuid: '',
    code: '',
  },
  rules: setting.rules
});
const {loginForm, rules} = toRefs(data);

/**  Method */
// 获取验证码
// const getCaptcha = async () => {
//   let _ = proxy
//   const {data: res} = await _.$H.post(_.$A.captcha, {})
//   captchaUrl.value = res.data.image
//   loginForm.value.uuid = res.data.uuid
// }
// 登录

const handleLogin = () => {
  let _ = proxy
  _.$refs.loginRef.validate(async valid => {
    if (!valid) return
    loading.value = true
    setToken('wxb')
    router.push({path:'/home'})
    loading.value = false
  })
}

// const handleLogin = () => {
//   let _ = proxy
//   _.$refs.loginRef.validate(async valid => {
//     if (!valid) return
//     loading.value = true
//     const {data: res} = await _.$H.post(_.$A.login, loginForm.value)
//     console.log('handleLogin',res)
//     if (res.code === 200) {
//         setToken(res.data.token)
//         store.userStore.setToken(res.data.token)
//         loading.value = false
//         /** 获取菜单*/
//         router.push({path:'/home'})
//     } else {
//         loading.value = false
//         getCaptcha()
//     }
//   })
// }

// 显示、隐藏密码
const showPwd = () => {
  if (passwordType.value === 'password') {
    passwordType.value = ''
  } else {
    passwordType.value = 'password'
  }
  this.$nextTick(() => {
    this.$refs.password.focus()
  })
}
</script>

<style lang="less" scoped>
@import "index.less";
</style>
